<script setup>
import { useRouter } from 'vue-router' // 1. 引入 useRouter
import { ref, onMounted,computed } from 'vue' // 1. 引入 ref 和 onMounted


const router = useRouter() // 2. 获取 router 实例

// 2. 创建一个响应式变量来存储角色名称
const userRole = ref('')
const userName = ref('') // 也可以顺便获取用户名

// 3. 在组件挂载后，从 localStorage 获取用户信息
onMounted(() => {
  const userInfoString = localStorage.getItem('userInfo')
  if (userInfoString) {
    const userInfo = JSON.parse(userInfoString)
    // 从解析后的对象中获取 role 和 name，并赋值给响应式变量
    userRole.value = userInfo.role || '用户' // 如果没有role，给个默认值
    userName.value = userInfo.name || '你好' // 如果没有name，给个默认值
  }
})


const card_item = [
  {
    id: 1,
    name: '首页',
    path: '/homeone',
  },
  {
    id: 2,
    name: '分组管理',
    path: '/group',
  },
  {
    id: 3,
    name: '消息发送中心',
    path: '/message',
  },
  {
    id: 4,
    name: '事务处理',
    path: '/task',
  },
    {
    id: 5,
    name: '统计',
    path: '/archive',
  },
      {
    id: 6,
    name: '系统统计',
    path: '/AdminArchive',
  },
  {
    id: 7,
    name: '日志',
    path: '/logs',
  },
]

// 3. 创建一个计算属性 visibleNavItems，它会根据 userRole 动态返回应显示的菜单数组
const visibleNavItems = computed(() => {
  // 如果角色是“管理员”，则返回所有菜单项
  if (userRole.value === '管理员') {
    return card_item
  }

  // 如果是其他角色，只返回指定的菜单项
  const allowedNames = ['首页', '事务处理', '统计']
  // 使用 filter 方法从所有菜单项中筛选出名称在 allowedNames 数组中的项
  return card_item.filter(item => allowedNames.includes(item.name))
})

function goToPersonalCenter() {
  router.push('/personalcenter')
}

// **新增：退出登录的函数**
function logout() {
  // 1. 清除登录状态
  localStorage.removeItem('user-token')

  // 2. 跳转到登录页
  // 使用 location.reload() 可以确保所有状态被重置，是个好习惯
  router.push('/').then(() => {
    window.location.reload()
  })
}
</script>

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container">
        <a class="navbar-brand d-flex align-items-center" href="#">
          <img
            src="@/assets/logo-icons8-full.svg"
            alt="Logo"
            width="40"
            height="40"
            class="d-inline-block align-text-top me-2"
          />
          融合日程管理系统
        </a>

        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item" v-for="item in visibleNavItems" :key="item.id">
              <router-link :to="item.path" class="nav-link">{{ item.name }}</router-link>
            </li>
          </ul>

          <div class="d-flex align-items-center">
            <span class="text-light me-3">欢迎，{{ userRole }}</span>
            <button class="btn btn-outline-light me-2" @click="goToPersonalCenter">个人中心</button>
            <button class="btn btn-light" @click="logout">退出</button>
          </div>
        </div>
      </div>
    </nav>
  </div>
  <div class="main">
    <router-view v-slot="{ Component }">
      <!-- 使用组件进行渲染 -->
      <component :is="Component"></component>
    </router-view>
  </div>
</template>
<style scoped>
.urgent-task {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}
.urgent-high {
  background-color: #ffebee;
  border-left: 5px solid #f44336;
}
.urgent-medium {
  background-color: #fff3e0;
  border-left: 5px solid #ff9800;
}
.urgent-low {
  background-color: #e8f5e9;
  border-left: 5px solid #4caf50;
}
.task-group {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 20px;
}
.task-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.task-meta {
  font-size: 0.85rem;
  color: #666;
  margin-left: 15px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
}
.task-title {
  font-weight: 500;
  color: #333;
  min-width: 150px;
}
.task-item:last-child {
  border-bottom: none;
}
.unread-badge {
  background-color: #dc3545;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 5px;
}
.task-meta {
  font-size: 0.85rem;
  color: #666;
  margin-top: 5px;
}
.task-title {
  font-weight: 500;
  color: #333;
}
.publisher {
  color: #0066cc;
}
.date-range {
  color: #666;
  font-style: italic;
}
.task-group h5 {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  margin: -15px -15px 15px -15px;
}
</style>
